import React from 'react';
import {connect} from 'react-redux';
import action from '../../../store/action';
import HeadNavComponent from "../../../components/headNav";
import {Switch,Toast } from 'antd-mobile';
import {GoPagePush} from '../../../assets/js/utils';
import Css from '../../../assets/css/home/reg/index.css';
class RegIndex extends React.Component{
    constructor(){
        super();
        this.state={
            checked:false,
            sPhonecode:'',
            bPassword:'',
            bStyle:'password'

        };
    }
    componentDidMount(){
        document.getElementById('title').innerHTML='登录';
        document.getElementById('keywords').content='员工福利方案,员工礼品,中秋新年礼品,企业福利平台,企业福利定制';
        document.getElementById('description').content='关爱通是中智旗下品牌，央企服务保证，提供完整员工福利解决方案，企业福利平台定制，为企业提供春节、端午、中秋、新年等各节日员工礼物，以及生日福利、员工激励发放，员工体检，一站式弹性福利平台。售前咨询:400-920-6969';
    }
    //解决内存泄漏
    componentWillUnmount(){
        clearInterval(this.timer)
        this.setState=(state,callback)=>{
            return ;
        }
    }
    //点击改变密码显示格式
    changeSwitch(){
        this.setState({checked:!this.state.checked},()=>{
            if (this.state.checked){
                this.setState({bStyle:'text'})
            }else {
                this.setState({bStyle:'password'})
            }
        })
    }
    //输入手机号
    changePhoneCode(e){
        this.setState({sPhonecode:e.target.value})
    }
    //输入密码
    changePassword(e){
        this.setState({bPassword:e.target.value})
    }
    //登录提交
     Submit(){
        if (this.state.sPhonecode.match(/^\s*$/)) {
            Toast.info('请输入手机号',2);
            return false;
        }
        if (!this.state.sPhonecode.match(/^1[0-9][0-9]{9}/)) {
            Toast.info('请输入正确的手机号',2);
            return false;
        }

        if (this.state.bPassword.match(/^\s*$/)) {
            Toast.info('请输入密码',2);
            return false;
        }
        //登录数据对接
         this.props.dispatch(action.actLogin.actLogin({
             props:this.props,
             Toast:Toast,
             GoPagePush:GoPagePush,
             cellphone:this.state.sPhonecode,
             password:this.state.bPassword,
             isLogin:true
         }))

    }
    //点击跳转页面
    goPage(url){
        GoPagePush(this.props,url)
    }

    render(){
        return(
            <div>
                <HeadNavComponent title={'会员登陆'} > </HeadNavComponent>
                <div class={Css['main']}>
                    <div className={Css['grop']+' mt20'}>
                        <div className={Css['col_border']}>
                            <input type='tel' placeholder='手机号' onChange={this.changePhoneCode.bind(this)}></input>
                        </div>
                    </div>
                    <div className={Css['grop']+' mt20'}>
                        <div className={Css['col_border']}>
                            <input className={Css['w54']} type={this.state.bStyle} placeholder='请输入密码' onChange={this.changePassword.bind(this)}></input>
                            <div className={Css['col_switch']}>
                                <Switch color='#EB1625' checked={this.state.checked} onClick={this.changeSwitch.bind(this)}></Switch>
                            </div>
                        </div>
                    </div>
                    <div className={Css['grop']+' mt20'}>
                        <div className={Css['col_btn']} onClick={this.Submit.bind(this)}>登录</div>
                    </div>
                    <div className={Css['grop']+' mt20'}>
                        <div className={Css['col_box']}><i className={'changPasswordIcn fs28'}></i>忘记密码</div>
                        <div className={Css['col_box']} onClick={this.goPage.bind(this,'reg/index')}><i className={'mobile fs28'}></i>快速注册</div>
                    </div>
                </div>
            </div>
        )
    }
}
export default connect((state)=>{
   return{
        state:state
    }
})(RegIndex)